<template>
  <div class="column">
    <div class="boxTitle">
      按户口类型
    </div>
     <div id="hklxChart" style="width:100%;height:100%;display:block;"></div>
  </div>
</template>

<script>
export default {
  name: 'hukouleixing',
  data () {
    return {
      // 
    }
  },
  mounted(){
    this.drawLine();
  },
  methods:{
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('hklxChart'))

        var option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 1048, name: '城镇'},
                {value: 735, name: '非农业'}
            ]
        }
    ]
};
        // 绘制图表
        myChart.setOption(option);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  div{
   
  }
</style>
